<template>
  <div class="app-container">
    <div class="common-content">
      <el-form label-width="80px">
        <el-form-item label="文章标题">
          <el-input v-model="title" maxlength="60" clearable placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="文章分类">
          <el-select v-model="tid" placeholder="请选择分类">
            <el-option v-for="item in categoryList" :key="item.tid" :label="item.html+item.typename" :value="item.tid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布类型">
          <el-select v-model="wid" placeholder="请选择分类">
            <el-option v-for="item in publicTypeList" :key="item.wid" :label="item.waytype" :value="item.wid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload
            :on-remove="handleRemove"
            class="upload-demo"
            drag
            :limit="1"
            :action="action"
            :on-change="getFile"
            :http-request="uploadImage"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
<!--          图片预览-->
          <transition name="el-zoom-in-center">
            <div v-show="previewImg!=''">
              <img class="img-preview" :src="previewImg">
            </div>
          </transition>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item>
            <tinymce v-model="content" :height="300"/>
        </el-form-item>
        <el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">添加</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        <div class="editor-content" v-html="content"/>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import Tinymce from '@/components/Tinymce'
  export default {
    name: 'addArticle',
    data() {
      return {
        title: '',//标题
        detail: '',//富文本内容
        type: [],
        content: '',
        action:'',//图片上传地址
        dialogImageUrl: '',
        dialogVisible: false,
        isClear: false,//是否清楚富文本
        file:'',//图片上传文件
        previewImg:'',//预览
        temporary_url:'',//临时路径
        categoryList:[],//分类数据
        publicTypeList:[],//发布类型
        tid:'',//文章栏目id
        wid:0,//上传类别id
      }
    },
    components: { Tinymce },
    mounted(){
      this.getCategoryList()
      this.getPublicType()
    },
    methods: {
      //获取发布类型数据
      async getPublicType(){
        const res = await this.$http('admin/publicType')
        if(res.code==1){
          this.publicTypeList = res.data
        }else{
          this.$message.error(res.info)
        }
      },
      //获取分类数据
      async getCategoryList(){
        const res = await this.$http('admin/blogType',{
          'keyword':''
        })
        if(res.code==1){
          this.categoryList =res.data
        }else{
          this.$message.error(res.info)
        }
      },
      //取消
      cancel(){
        this.content = ''
        this.title = ''
        this.previewImg = ''
        this.temporary_url = ''
      },
      //获取文件
      getFile(file){
        this.file = file
      },
      //图片上传
     async uploadImage(){
        let fileFormData = new FormData();
        fileFormData.append('file',this.file.raw); //file是值，就是要传的文件，
        console.log(this.file,'file')
        const data =await this.$http('/common/upload',fileFormData,false,true)
        if(data.code==1){
          this.previewImg = data.data.url
          this.temporary_url =data.data.temporary_url
        }else{
          this.$message.error(res.info)
        }
      },
      async onSubmit() {
        if(this.title.trim()==''){
          this.$message.error('标题不能为空!')
          return
        }
        if(this.tid==''){
          this.$message.error('请选择分类栏目!')
          return
        }
        if(this.content==''){
          this.$message.error('内容不能为空!')
          return
        }
        const res = await this.$http('/admin/addBlog',{
          'title':this.title,
          'content':this.content,
          'tid':this.tid,
          'wid':this.wid,
          'url':this.temporary_url
        })
        if(res.code==1){
          this.$message.success(res.info)
          setTimeout(()=>{
            this.$router.push('/article/articleList')
          },500)
        }else{
          this.$message.error(res.info)
        }
      },
      //图片移除钩子
     async handleRemove(file, fileList) {
        console.log(file, fileList)
        const data =await this.$http('/common/imageDel',{
          'file':this.temporary_url
        })
       if(data.code==1){
         this.previewImg = ''
       }else{
         this.$message.error(res.info)
       }
      }
    }
  }
</script>
<style scoped lang="scss">
  ::v-deep .el-input{
    width: 400px;
  }
  .editor-content {
    margin-top: 20px;
  }
  /*  图片预览*/
  .img-preview{
    height: 180px;
    width: 180px;
  }
</style>
